<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>
<body>

<button id="btn1" onclick="fun()">单击</button>
<button id="btn2">双击</button>
<br>

<form id="form" action="#">
    姓名<input type="text" id="username" name="username"><br>
    密码<input type="text" name="password"><br>
    省份<select id="province" name="province" onchange="fun3()">
    <option>安徽</option>
    <option>北京</option>
    <option>上海</option>
</select>
    市<select id="city" name="province">
    <option>合肥</option>
    <option>芜湖</option>
    <option>安庆</option>
    <option>阜阳</option>
</select><br>
    <input type="submit" value="登录"><br>
</form>

<script>
    // 常见事件和事件预定
    function fun() {
        alert("单击");
    }

    // 获取标签，动态绑定事件
    document.getElementById("btn2").ondblclick = function () {
        alert("双击");
    }

    // 失去焦点事件
    document.getElementById("username").onblur  = function () {
        // this: 表示当前操作的标签对象
        var val = this.value;  // 获取输入框value属性值
        if(val == ""){
            alert("请输入姓名!!")
        }
    }

    function fun3() {
        alert("省份改变了....");
    }
</script>
</body>
</html>